<template>
  <div class="login">
    <div class='login-box'>
      <h1>万律后台管理系统</h1>
      <form class='form' @submit.prevent="submit">
        <div class='item'>
          <label for="">手机号码：</label>
          <input type="text" v-model="phone">
        </div>
        <div class='item'>
          <label for="">密码：</label>
          <input type="text" v-model="password">
        </div>
        <div class='item submit-box'>
          <input type="submit" value="提交">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
import global_ from '../components/Global.vue';
import qs from 'qs';
export default {
  name: 'Login',
  data() {
    return {
      phone: '18069784062',
      password: '123456',
    }
  },
  methods: {
    submit() {
      console.log('phone:::', this.phone)
      // this.login();
      this.loginByNode();
    },
    login() {
      console.log('this.GLOBAL::', this.GLOBAL.baseUrl);
      const _this = this;
      const params = new URLSearchParams();
      params.append('username', this.phone);
      params.append('password', this.password);
      this.$axios.post(`${this.GLOBAL.baseUrl}/employee/login.htm`, params, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          // 'Content-Type': 'application/json',
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.retCode == 0) {
          // console.log('store:::', store.state.user);
          // store.state.user.commit('setToken', res.data.token);
          global_.setToken('8888');
          
          _this.$router.push('/home');
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    loginByNode() {
      console.log('this.GLOBAL::', this.GLOBAL.baseUrl);
      // const params = new URLSearchParams();
      // params.append('phone', this.phone);
      // params.append('password', this.password);
      const params = qs.stringify({
        phone: this.phone,
        password: this.password
      });

      this.$axios.post(`${this.GLOBAL.baseUrl}/api/admin/login`, params, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          // 'Content-Type': 'application/json',
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.returnCode === 200) {
          // console.log('store:::', store.state.user);
          // store.state.user.commit('setToken', res.data.token);
          console.log('this.store', this.$store);
          console.log('GLOBAL::::', this.GLOBAL);
          console.log('global_::::', global_);
          global_.setToken(res.data.token);
          this.$store.commit('increment')
          console.log('---------------store:::', this.$store.state);
          this.$router.push('/home');
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box{
  width: 480px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.login-box>h1{
  text-align: center;
  font-size: 36px;
}
.form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item{
  width: 300px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 10px 0;
}
.item>label{
  width: 100px;
  display: block;
  text-align: right;
  font-size: 16px;
  color: #666;
  flex-shrink: 0;
}
.item>input{
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  color: #333;
  width: 200px;
  box-sizing: border-box;
  outline: none;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.submit-box{
  padding-left: 100px;
  box-sizing: border-box;
}
.submit-box>input{
  cursor: pointer;
}
</style>
